<template>
  <div class="main t1">
    <div class="text">
      <div class="time">{{time}}</div>
      <div class="date">{{date}}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'timer',
  components: {
  },
  data() {
    return {
      time: '',
      date: '',
    }
  },
  mounted() {
    let _this = this
    setInterval(()=>{
      _this.timeUpdate()
    },1000)
  },
  methods: {
    timeUpdate() {
      let _date = new Date()
      this.date = this.format(_date, 'yyyy-MM-dd')
      this.time = this.format(_date, 'hh:mm:ss')
    },
    format(date, fmt) {
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
        }
      }
      return fmt
    }
  }
}
</script>

<style>
:root {
  --LINKCOLOR: #409EFF;
}
@font-face {
  font-family: "timerFont";
  src: url(./assets/timer/f3.ttf) format('truetype'),
       url(./assets/timer/f3.ttf) format('embedded-opentype'),
       url(./assets/timer/f3.ttf) format('woff');
}
#app {background-color: #e8e8f2;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;}
a:link,a:hover,a:visited,a:focus{color: var(--LINKCOLOR);text-decoration: none;}
.main{position: relative;margin: 0 auto;text-align: center;margin-top: 20px;}
.main.t1{width: 500px;height: 160px;background: url(./assets/timer/1.png);background-size: 100% 100%;}
.main.t1 .text{
  position: absolute;display: flex;flex-direction: column;align-items: center;justify-content: center;top: 38px;left: 186px;width: 300px;height: 92px;
  font-family: 'timerFont';
  font-size: 56px;color: #748897;
}
.main.t1 .text .date{font-size: 28px;}
</style>
